<template>
	<view class="custom-picker">
		<!-- 选择器触发区域 -->
		<view class="certificate" @click="openPicker">
			<view class=""  :style="selectedLabel ? '' : 'color: #999999'">{{ selectedLabel || '请选择' }}</view>
			<view class="">
				<uv-icon name="arrow-right"></uv-icon>
			</view>
		</view>

		<!-- 选择器组件 -->
		<uv-picker ref="pickerRef" :columns="displayColumns" @confirm="handleConfirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';

	// 定义组件属性
	const props = defineProps({
		// 选项列表，格式: [{id: 1, label: '身份证'}, {id: 2, label: '驾驶证'}]
		options: {
			type: Array,
			required: true,
			default: () => []
		},
		// 初始选中的ID
		defaultValue: {
			type: [Number, String],
			default: null
		}
	});

	// 定义组件事件
	const emit = defineEmits(['change']);

	// 选择器引用
	const pickerRef = ref(null);
	// 显示的选项文本（用于选择器展示）
	const displayColumns = ref([]);
	// 选中的文本
	const selectedLabel = ref('');
	// 选中的ID
	const selectedId = ref(props.defaultValue);

	// 初始化 - 处理选项数据
	const init = () => {
		// 提取label用于选择器显示
		displayColumns.value = [props.options.map(item => item.label)];

		// 如果有默认值，找到对应的文本
		if (props.defaultValue) {
			const defaultOption = props.options.find(item => item.id === props.defaultValue);
			if (defaultOption) {
				selectedLabel.value = defaultOption.label;
			}
		}
	};

	// 打开选择器
	const openPicker = () => {
		if (pickerRef.value) {
			pickerRef.value.open();
		}
	};

	// 处理选择确认
	const handleConfirm = (e) => {
		// 获取选中的文本
		const selectedText = e.value[0];
		// 找到对应的ID
		const selectedOption = props.options.find(item => item.label === selectedText);

		if (selectedOption) {
			selectedLabel.value = selectedOption.label;
			selectedId.value = selectedOption.id;
			// 触发事件，向外传递选中的ID和文本
			emit('change', {
				id: selectedOption.id,
				label: selectedOption.label
			});
		}
	};

	// 初始化组件
	init();
</script>

<style scoped>
	/* 可以根据需要添加样式 */
	.custom-picker {
		margin: 10px 0;
	}

	.certificate {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 2px;
		border-bottom: 1px solid #eee;
		color: #333;
	}
</style>